<template>

	<div class="mui-media-body">
		<!--大标题-->
		<h1>{{newsinfo.title}}</h1>
		<!--短标题-->
		<p class='mui-ellipsis'>
			<!--过滤器       时间格式化-->
			<!--<span>{{item.add_time| dataFormat}}</span>-->
			<span>发表时间:{{newsinfo.add_time|dataFormat}}</span>
			<span>点击{{newsinfo.click}}次</span>
		</p>
		<hr>
		<!--内容区域-->
		<div class="content" v-html="newsinfo.content"></div>
		
		<!--评论区域-->	
		
		<!--3.引入子组件 并向子组件传值  -->
		<comment :id="this.id"></comment>
	</div>

</template>

<script>
	import Toast from 'mint-ui'
//	1.导入子组件
	import comment from '../subcomponents/comment'
	export default {	
		data() {
			return {
				id: this.$route.params.id,//将URL 地址中传递过来的参数id，挂载到data上，方便以后调用
				newsinfo:{}//新闻对象
			}
		},
		created(){
			this.getNewsInfo()
		},
		methods:{
			getNewsInfo(){ //获取新闻信息
				this.$http.get('api/getnew/'+ this.id).then(result=>{
					if(result.body.status===0){
						this.newsinfo=result.body.message[0]
						
					}else{
						Toast("加载新闻信息失败")
					}
				})
			}
		},
		//2.注册子组件
		components: {
			comment
		}
	}
</script>

<style scoped lang="less">
	.mui-media-body {
		padding: 4px 0;
		h1 {
			text-align: left;
			font-size: 12px;
			text-align: center;
		}
		.mui-ellipsis {
			padding: 5px;
			font-size: 12px;
			text-align: left;
			color: cornflowerblue;
			display: flex;
			justify-content: space-between;
		}
		.content{
			text-align: left;
		}
	}
</style>